<template>
  <div class="info boxstyle">
    <div class="info-main">
      <ul>
        <li>
          <img src="@/assets/icon/info-img-1.svg" alt />
          <div>
            <span>面积(k㎡)</span>
            <p>{{ options.A1 }}</p>
          </div>
        </li>
        <li>
          <img src="@/assets/icon/info-img-2.svg" alt />
          <div>
            <span>常住人口(万)</span>
            <p>{{ options.A2 }}</p>
          </div>
        </li>
        <li>
          <img src="@/assets/icon/info-img-3.svg" alt />
          <div>
            <span>地区GDP(亿元)</span>
            <p>{{ options.A3 }}</p>
          </div>
        </li>
        <li>
          <img src="@/assets/icon/info-img-4.svg" alt />
          <div>
            <span>财政总收入(亿元)</span>
            <p>{{ options.A4 }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  name: 'TopMiddleChart1',
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      options: {}
    }
  },
  watch: {
    depCode: {
      handler: function (newValue, oldValue) {
        this.initData()
      },
      immediate: true
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.map.getBaseInfo({
          dep_code: this.depCode
        })
        console.log(res)
        //赋值给变量
        this.options = res
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang='scss'>
.info-main {
  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;

    li {
      width: 25%;
      padding-bottom: 10px;
      text-align: center;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.info-main li:nth-child(1) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-main li:nth-child(2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-main li:nth-child(3) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.info-main li img {
  width: 40px;
  display: block;
  margin-right: 15px;
}

.info-main li span {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #fdfdfd;
  line-height: 18px;
  font-weight: 600;
}

.info-main li p {
  font-family: DINAlternate-Bold;
  font-size: 30px;
  color: #ffffff;
  line-height: 30px;
  font-weight: 700;
  margin-top: 8px;
}

.info-main ul {
  overflow: hidden;
}

.boxstyle {
  box-sizing: border-box;
  position: relative;
}
</style>